import React from 'react'
import './app.css'
import { useState, useRef } from 'react'

export default function App() {
  const inputRef = useRef(null)
  const [message, setMessage] = useState('')
  const [chat, setChat] = useState([])
  function sendMessage() {
    if (message.trim() === '') {
      return
    }
    setChat([...chat, {
      type: 'user',
      content: message
    }])
    setMessage('')
    fetch('http://localhost:3000/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        message
      })
    }).then(res => res.json()).then(data => {
      setChat([...chat, {
        type: 'bot',
        content: data.message
      }])
    })
  }
  return (
    <div className='container'>
      <div className='header'>
        <h1>Chat Box</h1>
      </div>

      <div className="content">

        <div className="bot">
          AI: <span>您好！我是您的 AI 智能助手，可以帮你解答问题，编写代码，进行创作等。请问有什么可以帮您？</span>
        </div>

        <div className="chat">
          <div className="user question item">
            me:
            <span>你好</span>
          </div>
          <div className="bot answer item">
            AI:
            <span>你好！有什么我可以帮助您的吗？</span>
          </div>

        </div>

      </div>

      <div className="input">
        <input type="text" placeholder="请输入" ref={inputRef} />
        <button onClick={() => sendMessage()}>发送</button>
      </div>

    </div>
  )
}